/**
 * 具体的项目信息弹窗
 */

import { Button, Table, Space, Modal, Tag } from 'antd';
import { useBoolean } from 'ahooks';
import Detail from './detail';

const { Column } = Table;

interface ShowProps {
  projectDataSource: PT.Project[];
  loading: boolean;
  handlePageChange: (page: number) => void;
  total: number;
}
const getStateColor = (state: string) => {
  switch (state) {
    case '未通过':
      return 'red';
    case '已通过':
      return 'green';
    default:
      return 'gray';
  }
};
const Show: React.FC<ShowProps> = props => {
  const [isShow, { setTrue, setFalse }] = useBoolean(false);
  const { projectDataSource, loading, handlePageChange, total } = props;

  return (
    <>
      <Table
        dataSource={projectDataSource}
        size="middle"
        loading={loading}
        rowKey={record => record.id}
        pagination={{
          onChange: page => {
            console.log('page改变', page);
            handlePageChange(page);
          },
          total,
        }}
      >
        <Column
          title="项目名称"
          dataIndex="name"
          key="name"
          render={(_text: string, record: PT.Project) => (
            <a onClick={setTrue}>{record?.name}</a>
          )}
        />
        <Column title="项目投资（万）" dataIndex="invest" key="invest" />
        <Column title="项目年份" dataIndex="create_year" key="create_year" />
        <Column title="开始时间" dataIndex="start_time" key="start_time" />
        <Column
          title="项目状态"
          dataIndex="state"
          key="state"
          render={(_text: string, record: PT.Project) => (
            <Tag color={getStateColor(record?.state)}>{_text}</Tag>
          )}
        />
        <Column
          title="操作"
          dataIndex="operation"
          key="operation"
          fixed="right"
          render={(_text: string, record: PT.Project) => (
            <Space size="middle">
              {record?.state === '未通过' ? (
                <a
                  type="primary"
                  onClick={setTrue}
                  style={{ color: '#ff3333' }}
                >
                  详情
                </a>
              ) : record?.state === '已通过' ? (
                <a style={{ color: 'gray' }} aria-disabled>
                  查看
                </a>
              ) : record?.state === '未审核' ? (
                <a style={{ color: 'green' }} onClick={setTrue}>
                  修改
                </a>
              ) : (
                <a style={{ color: 'gray' }} aria-disabled></a>
              )}
            </Space>
          )}
          /* <Space size="middle">
              <a onClick={setTrue}>修改</a>
            </Space>
          )} */
        />
      </Table>
      <Modal
        title="项目查看"
        visible={isShow}
        onCancel={setFalse}
        style={{ top: '15px' }}
        width={'70vw'}
        footer={
          <Button key="back" onClick={setFalse}>
            返回
          </Button>
        }
      >
        <Detail />
      </Modal>
    </>
  );
};

export default Show;
